<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <input type="button" value="启动" @click="start">
    <input type="button" value="暂停" @click="stop">

    <br>
    {{ msg }}
</div>
<script>
    // 创建一个vue实例

    // 在vm实例中要是想要调用data中的数据  或者methods 的方法 ，需要通过this来获取
    new Vue({

        data:{
            msg:'猥琐猥琐发育，别浪！',
            interval: null
        },
        methods:{
            //自动截取的功能 需要定时器
            start() {

//                var _this = this
//                console.log(this.msg)
//                setInterval(function () {
//                    var start1 = _this.msg.substring(0,1)
//                    var end1 = _this.msg.substring(1)
//                    _this.msg = end1 +start1
//                },100)

                // 箭头函数内部的this  永远和箭头外部保持一致
                if( this.interval !== null) return
                this.interval = setInterval( ()=>{
                    var start1 = this.msg.substring(0,1)
                    var end1 = this.msg.substring(1)
                    this.msg = end1 +start1

                },300)
            },
            stop () {
                clearTimeout(this.interval)
                this.interval = null
            }

        }
    }).$mount('#app')
</script>
</body>
</html>
